<script>
  import { getPlayer } from '$lib';
  import { Hunger } from './hunger';
  import { HP } from './stats';

  let { world, zoomlevel, tick } = $props();

  let style = $derived(`font-size: ${zoomlevel*0.7}px`);

  let player = $derived((tick, getPlayer(world)));
  let hp = $derived((tick, HP.hp[player]));
  let maxhp = $derived((tick, HP.maxhp[player]));

  let health = $derived('♥'.repeat(hp));
  let maxhealth = $derived('♥'.repeat(maxhp-hp));

  let satiation = $derived((tick, Hunger.satiation[player]));
  const describeHunger = (sat) => {
    if (sat < -100)
      return ['hungry', 'color: #a80'];
    if (sat > 40)
      return ['stuffed', 'color: #4c0'];
    return ['', ''];
  }
  let hungerStatus = $derived(describeHunger(satiation)[0]);
  let hungerStyle = $derived(describeHunger(satiation)[1]);
</script>

<section class="char-status" {style}>
  <div class="healthbar" {style}>
    <span class="hp" {style}>{health}</span>
    <span class="maxhp" {style}>{maxhealth}</span>
  </div>
  <div class="effects">
    {#if hungerStatus !== ''}
      <span style="{hungerStyle};{style}">{hungerStatus}</span>
    {/if}
  </div>
</section>

<style>
  .char-status {
    grid-area: rightside;
  }
  .healthbar {
    display: flex;
    align-items: baseline;
  }
  .hp {
    color: #b33;
    -webkit-text-stroke: 1px #b33;
  }
  .maxhp {
    color: #1111;
    -webkit-text-stroke: 1px #b33;
  }
  .effects {
  }
</style>
